<template>
  <h3>{{name}}的购物车</h3>

  <ShoppingCart>
    <Cart>
      <h4>购物车</h4>
      <CartItem v-for="(e,i) in cartItems" :key="e.id" class="border">
        <span class="col-1">{{ i + 1 }}</span>
        <span class="col-3">{{e.name}}</span>
        <span class="col-2">{{e.price}}</span>
        <span class="col-2">
          <div class="btn-group-sm">
            <a class="btn btn-primary" @click.stop.prevent="reduce(e.id)">-</a>
            <a class="btn" >{{e.num}}</a>
            <a class="btn btn-primary" @click.stop.prevent="increase(e.id)">+</a>
          </div>
        </span>
        <span class="col-2">{{ e.price * e.num }}</span>
        <span class="col-2">
          <a class="btn btn-primary" @click.stop.prevent="remove(e.id)">删除</a>
        </span>
      </CartItem>
    </Cart>
    <RecycleBin>
      <h4>回收站</h4>
      <CartItem v-for="(e,i) in recycleBinItems" :key="e.id" class="border">
        <span class="col-1">{{ i+1 }}</span>
        <span class="col-3">{{ e.name }}</span>
        <span class="col-2">{{ e.price }}</span>
        <span class="col-2">{{ e.num }}</span>
        <span class="col-2">{{ e.price * e.num }}</span>
        <span class="col-2">
          <a class="btn btn-primary" @click.stop.prevent="recover(e.id)">恢复</a>
        </span>
      </CartItem>
    </RecycleBin>
  </ShoppingCart>

</template>

<script>
import 'bootstrap/dist/css/bootstrap.min.css';
import ShoppingCart from "./components/ShoppingCart";
import Cart from "./components/Cart";
import CartItem from "./components/CartItem";
import RecycleBin from "./components/RecycleBin";

export default {
  name: 'App',
  components: {
    ShoppingCart,
    Cart,
    CartItem,
    RecycleBin
  },
  data(){
    return {
      name: '赵婷',
      cartItems: [
        { id: 1001, name: 'Vue.js 3.0从入门到实战' , price: 99.8 , num: 1 },
        { id: 2002, name: 'JavaScript 高级程序设计' , price: 120 , num: 1 },
        { id: 3003, name: 'JavaScript 权威指南' , price: 98 , num: 1 },
        { id: 4004, name: '符是怎么画出来的' , price: 998 , num: 1 }
      ],
      recycleBinItems: []
    }
  },
  methods: {
    reduce(id){
      console.log( id );
      let p = this.cartItems.find( e => e.id == id );
      if( p.num > 1 ) {
        p.num-- ;
      }
    },
    increase(id){
      console.log( id );
      let p = this.cartItems.find( e => e.id == id );
      p.num++ ;
    },
    remove(id){
      let index = this.cartItems.findIndex( e => e.id == id );
      this.recycleBinItems.push( this.cartItems[ index ] );
      this.cartItems.splice( index , 1 );
    },
    recover(id) {
      let index = this.recycleBinItems.findIndex( e => e.id == id );
      this.cartItems.push( this.recycleBinItems[ index ] );
      this.recycleBinItems.splice( index , 1 );
    }
  }
}
</script>

<style scoped>
h3 {
  text-align: center ;
}
</style>
